import React from 'react'
import ReactDOM from 'react-dom'
import './index.less'
import {NavBar,Icon, Tabs, WhiteSpace, Badge,List,PullToRefresh,ListView, Button  } from 'antd-mobile';
import axios from '../../axios/index'
const tabs = [
    { title: <Badge>全部</Badge> },
    { title: <Badge>收入</Badge> },
    { title: <Badge>支出</Badge> },
  ];
const Item = List.Item;
const Brief = Item.Brief;
const data = [
    {
      img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
      title: 'Meet hotel',
      des: '不是所有的兼职汪都需要风吹日晒',
    },
    {
      img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
      title: 'McDonald\'s invites you',
      des: '不是所有的兼职汪都需要风吹日晒',
    },
    {
      img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
      title: 'Eat the week',
      des: '不是所有的兼职汪都需要风吹日晒',
    },
  ];
  const NUM_ROWS = 20;
  let pageIndex = 0;
  
  function genDatas(pIndex = 0) {
    const dataArr = [];
    for (let i = 0; i < NUM_ROWS; i++) {
      dataArr.push(`row - ${(pIndex * NUM_ROWS) + i}`);
    }
    return dataArr;
  }
  function genData(pIndex = 0){
    axios.ajax({
      url:'/api/v1/customer_service/user/accountBalanceBills',
      method:'get',
      data:{
          page:pIndex,
          type:''
      }
  }).then((res)=>{
    if(res){
      let data=res.data.data;
      if(res.code===0){
        // this.setState({
        //   refreshing: false,
        //   isLoading: false,
        // });
        
        if(data.length>0){
          return res.data.data;
        }else{
          return res.data.data;
          console.log("data=0没数据了");
          // this.setState({
          //   hasMore: false
          // });
        }
      }           
    }           
  });           
  }
  
export default class GrowthValue extends React.Component{
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
          });
      
          this.state = {
            dataSource,
            refreshing: true,
            isLoading: true,
            height: document.documentElement.clientHeight,
            useBodyScroll: false,
          };
      }
      
  componentDidUpdate() {
    if (this.state.useBodyScroll) {
        document.body.style.overflow = 'auto';
      } else {
        document.body.style.overflow = 'hidden';
      }
    }
  
    componentDidMount() {
      console.log('dataArr:',genDatas());
      this.rData = genData();
        console.log('didMount:',this.rData);
      const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
  
      setTimeout(() => {
        this.rData = genData();
        console.log('didMount:',this.rData);
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(genData()),
          height: hei,
          refreshing: false,
          isLoading: false,
        });
      }, 1500);
    }
  
    onRefresh = () => {
      this.setState({ refreshing: true, isLoading: true });
      // simulate initial Ajax
      setTimeout(() => {
        this.rData =genData();
        console.log('rData:',this.rData);
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(this.rData),
          refreshing: false,
          isLoading: false,
        });
      }, 600);
    };
  
    onEndReached = (event) => {
      // load new data
      // hasMore: from backend data, indicates whether it is the last page, here is false
      if (this.state.isLoading && !this.state.hasMore) {
        return;
      }
      console.log('reach end', event);
      this.setState({ isLoading: true });
      setTimeout(() => {
        this.rData = [...this.rData, ...genData(++pageIndex)];
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(this.rData),
          isLoading: false,
        });
      }, 1000);
    };
  
    render(){

      const row = (rowData, sectionID, rowID) => {
        return (
          <List renderHeader={() => ''} className="my-list">
            <Item multipleLine 
              extra={
                <span style={{color:rowData.amount>0?'#FF9800':'#8BC34A'}}>{rowData.amount>0?('+'+rowData.amount):('-'+rowData.amount)}</span>
                }>
              <span style={{fontSize:'14px'}}>{ rowData.mark}</span>
              <Brief> <span>{rowData.updated_at}</span></Brief>
            </Item>
          </List>
        );
    };
        return(
            <div>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() =>{
                        const {history}=this.props;
                        history.push({pathname:'/mine'});
                    }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >成长值明细</NavBar>
                <Tabs tabs={tabs}
                    initialPage={0}
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                    >
                    <div>
                    
                      <ListView
                        key={this.state.useBodyScroll ? '0' : '1'}
                        ref={el => this.lv = el}
                        dataSource={this.state.dataSource}
                        renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                          {this.state.isLoading ? 'Loading...' : 'Loaded'}
                        </div>)}
                        renderRow={row}
                        useBodyScroll={this.state.useBodyScroll}
                        style={this.state.useBodyScroll ? {} : {
                          height: this.state.height,
                        }}
                        pullToRefresh={<PullToRefresh
                          refreshing={this.state.refreshing}
                          onRefresh={this.onRefresh}
                        />}
                        onEndReached={this.onEndReached}
                        pageSize={5}
                      />
                    </div>            
                        
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                        Content of second tab
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                        Content of third tab
                    </div>
                </Tabs>
            </div>
        );
    }
}